<template>
	<view class="transactionDetails">
		<HeaderBar title="交易详情" showBack backgroundColor="#F6F6F6" fixed />
		<view class="contentBox" v-if="info">
			<view class="state">
				<view class="coin">
					<image src="/static/images/home/success.png" class="icon" mode="widthFix"></image>
				</view>
			</view>
			<view class="stutes">
				转账成功
			</view>
			<view class="numbers">
				{{info.type}}{{info.num}}{{conInfo.tokensymbol}}
			</view>
			<view class="cell">
				<view class="title">
					发款方

				</view>
				<view class="address">
					<view class="addCopy">
						<text>{{$utils.formatAddress(info.type=="-"?conInfo.address:info.otheraddress)}}</text>
						<image src="/static/images/home/copy.png" class="copy" mode="widthFix"
							@tap="copy(info.type=='-'?conInfo.address:info.otheraddress)"></image>
					</view>
					<view class="chain">
						(TRON-1)
					</view>
				</view>
			</view>
			<view class="cell toAddress">
				<view class="title">
					收款方
				</view>
				<view class="address">
					<view class="addCopy">
						<text>{{$utils.formatAddress(info.type=="-"?info.otheraddress:conInfo.address)}}</text>
						<image src="/static/images/home/copy.png" class="copy" mode="widthFix"
							@tap="copy(info.type=='-'?info.otheraddress:conInfo.address)"></image>
					</view>
				</view>
			</view>
			<view class="feel" v-if="fee||net_fee||energy_usage_total">
				<view class="title">
					<text>网络费</text>
					<image src="/static/images/home/helpGray.png" class="icon" mode=""></image>
				</view>
				<view class="blocks">
					<view class="block" v-if="fee">
						{{fee}}TRX
					</view>
					<view class="block" v-if="net_fee">
						{{net_fee}}带宽
					</view>
					<view class="block" v-if="energy_usage_total">
						{{energy_usage_total}}能量
					</view>
				</view>
			</view>
			<!-- <view class="more">
				<view class="title">
					<text>查看更多</text>
					<image src="/static/images/personal/down.png" class="icon" mode=""></image>
				</view>
			</view> -->
			<view class="line"></view>
			<view class="cell hash">
				<view class="title">
					哈希值
				</view>
				<view class="address">
					<view class="addCopy">
						<text>{{$utils.formatAddress(info.hash)}}</text>
						<image src="/static/images/home/copy.png" class="copy" mode="widthFix" @tap="copy(info.hash)">
						</image>
					</view>
				</view>
			</view>
			<view class="cell hash">
				<view class="title">
					区块号
				</view>
				<view class="address">
					<view class="addCopy">
						<text>{{blockNumber}}</text>
						<image src="/static/images/home/copy.png" class="copy" mode="widthFix" @tap="copy(blockNumber)">
						</image>
					</view>
				</view>
			</view>
			<view class="cell time">
				<view class="title">
					交易时间
					<!-- <view class="link">
						查询链接
						<image src="/static/images/home/copy.png" class="copy" mode="widthFix"></image>
					</view> -->
				</view>
				<view class="address">
					<view class="addCopy">
						<text>{{info.time}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="query">
			<view class="title" @tap="webView(chainInfo.browser,info.hash)">
				查询详情信息
			</view>
			<!-- <view class="app">
				<view class="appItem">
					<view class="coin">
						<image src="/static/images/chain/chainTrx.png" class="icon" mode="widthFix"></image>
					</view>
					<view class="">
						tronscan
					</view>
				</view>
				<view class="appItem">
					<view class="coin">
						<image src="/static/images/chain/TOKENVIEW.png" class="icon" mode="widthFix"></image>
					</view>
					<view class="">
						TOKENVIEW
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getTransction
	} from '../../http/api.js';
	export default {
		data() {
			return {
				info: null,
				conInfo: null,
				fee: "",
				blockNumber: "",
				net_fee: "",
				energy_usage_total: ""
			}
		},
		computed: {
			chainInfo() {
				return this.$store.getters.chainInfo
			}
		},
		onLoad(options) {
			const infoStr = options.infoStr || '';
			const conInfoStr = options.conInfoStr || '';
			try {
				// 解码并反序列化 JSON 字符串
				const info = JSON.parse(decodeURIComponent(infoStr));
				const conInfo = JSON.parse(decodeURIComponent(conInfoStr));
				this.conInfo = conInfo
				this.info = info
				this.getTransction()
			} catch (error) {}

		},
		mounted() {},
		methods: {
			getTransction() {
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let param = {
					hash: this.info.hash,
					chainid: this.conInfo.chainId
				}
				getTransction(param).then((res) => {
					uni.hideLoading()
					if (res.code == 200) {
						this.fee = res.data.fee
						this.blockNumber = res.data.blockNumber
						this.net_fee = res.data.net_fee
						this.energy_usage_total = res.data.energy_usage_total
					}
				}).catch((err) => {
					uni.hideLoading()
				})
			},
			webView(url, hash) {
				let web = this.chainInfo.chainId == 0 ? `${url}#/transaction/${hash}` : `${url}/tx/${hash}`
				uni.navigateTo({
					url: `/pages/webView/webView?title=区块浏览器&url=${web}`
				})
			},
			copy(address) {
				uni.setClipboardData({
					data: address,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.transactionDetails {
		background: #F6F6F6;
		font-size: 28upx;
		min-height: 100%;
		font-weight: 400;

		.contentBox {
			background: #FFFFFF;
			margin: 79upx 46upx 0;
			border-radius: 20upx;
			padding-left: 40upx;
			padding-bottom: 60upx;

			.state {
				position: relative;
				width: 100%;
				height: 59upx;
				display: flex;
				justify-content: center;

				.coin {
					position: absolute;
					top: -59upx;

					.icon {
						width: 118upx;
						height: 118upx;
					}
				}
			}

			.stutes {
				text-align: center;
				color: #14A57C;
				font-size: 30upx;
				margin-top: 20upx;
			}

			.numbers {
				text-align: center;
				color: #3D3D3D;
				font-size: 36upx;
				margin-top: 14upx;
			}

			.cell {
				.title {
					color: #999999;
					// margin-bottom: 6upx;
				}

				.address {
					color: #3D3D3D;

					.addCopy {
						display: flex;
						align-items: center;

						.copy {
							width: 34upx;
							height: 34upx;
							margin-left: 14upx;
						}
					}

					.chain {
						color: #999999;
						font-size: 20upx;
					}

				}
			}

			.toAddress {
				margin-top: 28upx;
			}

			.feel {
				margin-top: 38upx;

				.title {
					display: flex;
					color: #999999;
					align-items: center;

					.icon {
						width: 36upx;
						height: 36upx;
						margin-left: 10upx;
					}
				}

				.blocks {
					display: flex;
					font-size: 24upx;
					color: #3D3D3D;
					margin-top: 14upx;

					.block {
						background: #F6F6F6;
						margin-right: 16upx;
						width: 136upx;
						height: 42upx;
						text-align: center;
						line-height: 42upx;
						border-radius: 8upx;
					}
				}
			}

			.more {
				display: flex;
				color: #368521;
				align-items: center;
				margin-top: 28upx;

				.icon {
					width: 18upx;
					height: 10upx;
					margin-left: 10upx;
				}
			}

			.line {
				width: 100%;
				height: 1upx;
				background: #D8D8D8;
				margin-top: 20upx;
			}

			.hash {
				margin-top: 20upx;
			}

			.time {
				margin-top: 20upx;

				.title {
					display: flex;
					justify-content: space-between;
					align-content: center;

					// margin-bottom: 6upx;
					.link {
						display: flex;
						align-content: center;

						.copy {
							width: 34upx;
							height: 34upx;
							margin-left: 8upx;
							margin-right: 14upx;
						}
					}

				}
			}
		}

		.query {
			margin-top: 52upx;

			.title {
				font-size: 28upx;
				color: #3D3D3D;
				text-align: center;
			}

			.app {
				display: flex;
				justify-content: space-between;
				padding: 0 120upx;
				margin-top: 60upx;

				.appItem {
					.coin {
						display: flex;
						justify-content: center;
						margin-bottom: 20upx;

						.icon {
							width: 52upx;
							height: 52upx;
						}
					}
				}
			}
		}
	}
</style>